<template>
	<div class="user-vip-page">
		<!-- 头部横幅 -->
		<div class="hero-section">
			<div class="hero-content">
				<div class="hero-text">
					<h1 class="hero-title">
						<CrownOutlined class="crown-icon" />
						升级为 VIP 会员
					</h1>
					<p class="hero-subtitle">解锁更多强大功能，享受专属特权服务</p>
					<div class="hero-buttons">
						<a-button
							type="primary"
							size="large"
							class="upgrade-btn"
							@click="showRedeemModal"
							:loading="upgradeLoading"
						>
							<GiftOutlined />
							使用兑换码升级
						</a-button>
						<a-button size="large" class="learn-more-btn" @click="scrollToFeatures"> 了解更多 </a-button>
					</div>
				</div>
				<div class="hero-image">
					<div class="vip-card">
						<div class="vip-card-header">
							<CrownOutlined class="card-crown" />
							<span class="card-title">{{ isVipUser ? 'VIP 会员' : 'VIP 会员' }}</span>
						</div>
						<div class="vip-card-body">
							<div class="member-info">
								<a-avatar size="large" :src="loginUserStore.loginUser.userAvatar || undefined">
									{{ loginUserStore.loginUser.userName?.[0]?.toUpperCase() }}
								</a-avatar>
								<div class="member-name">{{ loginUserStore.loginUser.userName || '用户' }}</div>
								<div class="member-status" :class="{ 'vip-active': isVipUser && !vipStatus.isExpired }">
									{{ vipStatus.text }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- VIP状态提示 -->
		<div v-if="isVipUser" class="vip-status-banner">
			<div class="container">
				<div class="status-content">
					<div class="status-left">
						<CrownOutlined class="status-icon" />
						<div class="status-text">
							<h3>恭喜您，您已经是VIP会员！</h3>
							<p>正在享受所有VIP专属特权，感谢您的支持</p>
						</div>
					</div>
					<div class="status-right">
						<div class="expire-info" v-if="vipExpireTime">
							<div class="expire-label">到期时间</div>
							<div class="expire-date" :class="`status-${vipStatus.className}`">
								{{ formatExpireDate }}
							</div>
							<div class="expire-status">{{ vipStatus.text }}</div>
						</div>
						<div class="expire-info permanent" v-else-if="loginUserStore.loginUser?.userRole === 'admin'">
							<div class="expire-label">会员期限</div>
							<div class="expire-date status-permanent">永久有效</div>
							<div class="expire-status">管理员特权</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 特权功能展示 -->
		<div class="features-section" ref="featuresRef">
			<div class="container">
				<h2 class="section-title">VIP 专属特权</h2>
				<div class="features-grid">
					<div class="feature-card" v-for="feature in features" :key="feature.id">
						<div class="feature-icon">
							<component :is="feature.icon" />
						</div>
						<h3 class="feature-title">{{ feature.title }}</h3>
						<p class="feature-description">{{ feature.description }}</p>
						<div class="feature-status" v-if="isVipUser">
							<CheckCircleOutlined style="color: #52c41a" />
							<span>已解锁</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 对比表格 -->
		<div class="comparison-section">
			<div class="container">
				<h2 class="section-title">功能对比</h2>
				<div class="comparison-table">
					<a-table :dataSource="comparisonData" :columns="comparisonColumns" :pagination="false" bordered>
						<template #bodyCell="{ column, record }">
							<template v-if="column.key === 'feature'">
								<span class="feature-name">{{ record.feature }}</span>
							</template>
							<template v-else-if="column.key === 'free'">
								<span v-if="record.free === true" class="status-yes">
									<CheckOutlined />
								</span>
								<span v-else-if="record.free === false" class="status-no">
									<CloseOutlined />
								</span>
								<span v-else class="status-limited">{{ record.free }}</span>
							</template>
							<template v-else-if="column.key === 'vip'">
								<span class="status-yes">
									<CheckOutlined />
									{{ record.vip }}
								</span>
							</template>
						</template>
					</a-table>
				</div>
			</div>
		</div>

		<!-- 升级按钮 -->
		<div class="upgrade-section" v-if="!isVipUser">
			<div class="container">
				<div class="upgrade-card">
					<h3>立即升级为 VIP 会员</h3>
					<p>使用兑换码即可享受所有VIP特权</p>
					<a-button
						type="primary"
						size="large"
						@click="showRedeemModal"
						class="final-upgrade-btn"
						:loading="upgradeLoading"
					>
						<GiftOutlined />
						立即兑换
					</a-button>
				</div>
			</div>
		</div>

		<!-- VIP信息/兑换码模态框 -->
		<VipInfoModal v-model:visible="redeemModalVisible" @success="handleRedeemSuccess" />
	</div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'
import {
	CrownOutlined,
	GiftOutlined,
	CloudUploadOutlined,
	PictureOutlined,
	DatabaseOutlined,
	CustomerServiceOutlined,
	ThunderboltOutlined,
	SafetyOutlined,
	CheckOutlined,
	CloseOutlined,
	CheckCircleOutlined,
} from '@ant-design/icons-vue'
import VipInfoModal from '@/components/modal/VipInfoModal.vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import { exchangeVipUsingPost } from '@/api/userController'
import dayjs from 'dayjs'

const loginUserStore = useLoginUserStore()

const redeemModalVisible = ref(false)
const featuresRef = ref()
const upgradeLoading = ref(false)

// 判断是否为VIP用户（考虑过期情况）
const isVipUser = computed(() => {
	const userRole = loginUserStore.loginUser?.userRole

	// 管理员永久有效
	if (userRole === 'admin') {
		return true
	}

	// 非VIP用户
	if (userRole !== 'vip') {
		return false
	}

	// VIP用户需要检查是否过期
	const expireTime = loginUserStore.loginUser?.vipExpireTime
	if (!expireTime) {
		// 没有过期时间，考虑为永久VIP
		return true
	}

	// 检查是否过期
	const now = dayjs()
	const expire = dayjs(expireTime)

	// 如果已过期，返回false
	return expire.isAfter(now)
})

// VIP过期时间
const vipExpireTime = computed(() => {
	return loginUserStore.loginUser?.vipExpireTime
})

// VIP状态计算（是否已过期）
const vipStatus = computed(() => {
	const userRole = loginUserStore.loginUser?.userRole

	// 管理员永久有效
	if (userRole === 'admin') {
		return { isExpired: false, text: '永久有效', className: 'permanent' }
	}

	// 非VIP用户
	if (userRole !== 'vip') {
		return { isExpired: true, text: '未开通', className: 'not-vip' }
	}

	// VIP用户检查过期时间
	const expireTime = vipExpireTime.value
	if (!expireTime) {
		return { isExpired: true, text: '已过期', className: 'expired' }
	}

	const now = dayjs()
	const expire = dayjs(expireTime)
	const diffDays = expire.diff(now, 'day')

	if (diffDays < 0) {
		return { isExpired: true, text: '已过期', className: 'expired' }
	} else if (diffDays === 0) {
		return { isExpired: false, text: '今日到期', className: 'expiring' }
	} else if (diffDays <= 7) {
		return { isExpired: false, text: `${diffDays}天后到期`, className: 'warning' }
	} else {
		return { isExpired: false, text: `${diffDays}天后到期`, className: 'active' }
	}
})

// 格式化过期时间显示
const formatExpireDate = computed(() => {
	if (!vipExpireTime.value) return ''
	return dayjs(vipExpireTime.value).format('YYYY.MM.DD')
})

// VIP特权功能
const features = [
	{
		id: 1,
		icon: CloudUploadOutlined,
		title: '无限制上传',
		description: '突破普通用户上传限制，享受无限制图片上传服务',
	},
	{
		id: 2,
		icon: PictureOutlined,
		title: '高级AI扩图',
		description: '使用最先进的AI算法进行图片扩展，效果更佳',
	},
	{
		id: 3,
		icon: DatabaseOutlined,
		title: '专属云存储',
		description: '获得100GB专属云存储空间，安全可靠',
	},
	{
		id: 4,
		icon: CustomerServiceOutlined,
		title: '优先客服',
		description: '享受VIP专属客服通道，问题快速响应',
	},
	{
		id: 5,
		icon: ThunderboltOutlined,
		title: '加速处理',
		description: '图片处理速度提升3倍，节省宝贵时间',
	},
	{
		id: 6,
		icon: SafetyOutlined,
		title: '数据保护',
		description: '多重备份机制，确保您的数据万无一失',
	},
]

// 功能对比数据
const comparisonData = [
	{ key: '1', feature: '每日上传限制', free: '10张', vip: '无限制' },
	{ key: '2', feature: 'AI扩图功能', free: false, vip: '✓' },
	{ key: '3', feature: '云存储空间', free: '1GB', vip: '100GB' },
	{ key: '4', feature: '客服支持', free: '工作日响应', vip: '7×24小时' },
	{ key: '5', feature: '处理速度', free: '标准', vip: '3倍加速' },
	{ key: '6', feature: '数据备份', free: false, vip: '✓' },
	{ key: '7', feature: '高级滤镜', free: false, vip: '✓' },
	{ key: '8', feature: '批量操作', free: '5张/次', vip: '无限制' },
]

const comparisonColumns = [
	{
		title: '功能',
		dataIndex: 'feature',
		key: 'feature',
		width: '40%',
	},
	{
		title: '免费用户',
		dataIndex: 'free',
		key: 'free',
		width: '30%',
		align: 'center' as const,
	},
	{
		title: 'VIP会员',
		dataIndex: 'vip',
		key: 'vip',
		width: '30%',
		align: 'center' as const,
	},
]

// 显示VIP信息/兑换模态框
const showRedeemModal = () => {
	// 无论是否为VIP用户，都显示模态框（VIP用户看信息，普通用户兑换）
	redeemModalVisible.value = true
}

// 滚动到功能介绍
const scrollToFeatures = () => {
	featuresRef.value?.scrollIntoView({ behavior: 'smooth' })
}

// 兑换成功处理
const handleRedeemSuccess = async () => {
	try {
		// 刷新用户信息
		await loginUserStore.fetchLoginUser()
		message.success('VIP权限已生效，正在刷新页面信息...')
	} catch (error) {
		console.error('刷新用户信息失败:', error)
		message.warning('兑换成功，但刷新用户信息失败，请手动刷新页面')
	}
}
</script>

<style scoped lang="scss">
.user-vip-page {
	min-height: 100vh;

	.hero-section {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 80px 0;
		color: white;

		.hero-content {
			max-width: 1200px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			gap: 60px;
			padding: 0 24px;

			.hero-text {
				flex: 1;

				.hero-title {
					font-size: 48px;
					font-weight: 700;
					margin-bottom: 20px;
					display: flex;
					align-items: center;
					gap: 16px;

					.crown-icon {
						color: #ffd700;
						font-size: 52px;
					}
				}

				.hero-subtitle {
					font-size: 20px;
					margin-bottom: 40px;
					opacity: 0.9;
					line-height: 1.6;
				}

				.hero-buttons {
					display: flex;
					gap: 16px;

					.upgrade-btn {
						background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
						border: none;
						height: 50px;
						padding: 0 32px;
						font-size: 16px;
						font-weight: 600;

						&:hover:not(:disabled) {
							transform: translateY(-2px);
							box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
						}
					}

					.learn-more-btn {
						height: 50px;
						padding: 0 32px;
						font-size: 16px;
						background: rgba(255, 255, 255, 0.1);
						border: 2px solid rgba(255, 255, 255, 0.3);
						color: white;

						&:hover {
							background: rgba(255, 255, 255, 0.2);
							border-color: rgba(255, 255, 255, 0.5);
							color: white;
						}
					}
				}
			}

			.hero-image {
				flex: 0 0 300px;

				.vip-card {
					background: rgba(255, 255, 255, 0.1);
					backdrop-filter: blur(10px);
					border-radius: 20px;
					padding: 30px;
					border: 1px solid rgba(255, 255, 255, 0.2);

					.vip-card-header {
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 12px;
						margin-bottom: 24px;

						.card-crown {
							color: #ffd700;
							font-size: 24px;
						}

						.card-title {
							font-size: 20px;
							font-weight: 600;
						}
					}

					.vip-card-body {
						text-align: center;
						position: relative;

						.member-info {
							.member-name {
								margin-top: 12px;
								font-size: 16px;
								font-weight: 500;
							}

							.member-status {
								margin-top: 8px;
								padding: 4px 12px;
								border-radius: 12px;
								font-size: 14px;
								background: rgba(255, 255, 255, 0.1);

								&.vip-active {
									background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
									color: white;
									font-weight: 600;
								}
							}
						}
					}
				}
			}
		}
	}

	.vip-status-banner {
		background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
		padding: 20px 0;

		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 24px;
		}

		.status-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: white;

			.status-left {
				display: flex;
				align-items: center;
				gap: 16px;

				.status-icon {
					font-size: 32px;
					color: #ffd700;
				}

				.status-text {
					h3 {
						margin: 0 0 4px 0;
						font-size: 20px;
						font-weight: 600;
					}

					p {
						margin: 0;
						opacity: 0.9;
					}
				}
			}

			.status-right {
				.expire-info {
					text-align: center;
					background: rgba(255, 255, 255, 0.15);
					backdrop-filter: blur(10px);
					border-radius: 12px;
					padding: 16px 20px;
					min-width: 140px;
					border: 1px solid rgba(255, 255, 255, 0.2);

					&.permanent {
						background: rgba(255, 255, 255, 0.2);
					}

					.expire-label {
						font-size: 12px;
						opacity: 0.8;
						margin-bottom: 4px;
						font-weight: 400;
					}

					.expire-date {
						font-size: 18px;
						font-weight: 700;
						line-height: 1.2;
						margin-bottom: 2px;

						&.status-active {
							color: #ffffff;
						}

						&.status-warning {
							color: #ffe58f;
						}

						&.status-expiring {
							color: #ffccc7;
						}

						&.status-expired {
							color: #ff7875;
						}

						&.status-permanent {
							color: #ffffff;
						}
					}

					.expire-status {
						font-size: 11px;
						opacity: 0.9;
						font-weight: 500;
						margin-top: 2px;
					}
				}
			}
		}

		@media (max-width: 768px) {
			.status-content {
				flex-direction: column;
				gap: 16px;
				text-align: center;

				.status-left {
					justify-content: center;
				}
			}
		}
	}

	.features-section {
		padding: 80px 0;
		background: #f8fafc;

		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 24px;
		}

		.section-title {
			text-align: center;
			font-size: 36px;
			font-weight: 700;
			margin-bottom: 60px;
			color: #2d3748;
		}

		.features-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
			gap: 32px;

			.feature-card {
				background: white;
				padding: 40px 32px;
				border-radius: 16px;
				text-align: center;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				position: relative;

				&:hover {
					transform: translateY(-8px);
					box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
				}

				.feature-icon {
					width: 80px;
					height: 80px;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto 24px;
					color: white;
					font-size: 32px;
				}

				.feature-title {
					font-size: 24px;
					font-weight: 600;
					margin-bottom: 16px;
					color: #2d3748;
				}

				.feature-description {
					color: #666;
					line-height: 1.6;
					font-size: 16px;
					margin-bottom: 16px;
				}

				.feature-status {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 8px;
					color: #52c41a;
					font-weight: 600;
					font-size: 14px;
				}
			}
		}
	}

	.comparison-section {
		padding: 80px 0;

		.container {
			max-width: 1000px;
			margin: 0 auto;
			padding: 0 24px;
		}

		.section-title {
			text-align: center;
			font-size: 36px;
			font-weight: 700;
			margin-bottom: 60px;
			color: #2d3748;
		}

		.comparison-table {
			.feature-name {
				font-weight: 600;
				color: #2d3748;
			}

			.status-yes {
				color: #52c41a;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
			}

			.status-no {
				color: #ff4d4f;
				font-size: 16px;
			}

			.status-limited {
				color: #faad14;
				font-weight: 500;
			}
		}
	}

	.upgrade-section {
		padding: 80px 0;
		background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);

		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 0 24px;
		}

		.upgrade-card {
			text-align: center;
			color: white;

			h3 {
				font-size: 32px;
				font-weight: 700;
				margin-bottom: 16px;
			}

			p {
				font-size: 18px;
				margin-bottom: 40px;
				opacity: 0.9;
			}

			.final-upgrade-btn {
				background: white;
				color: #ffb300;
				border: none;
				height: 56px;
				padding: 0 40px;
				font-size: 18px;
				font-weight: 600;

				&:hover:not(:disabled) {
					transform: translateY(-2px);
					box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
				}
			}
		}
	}

	:deep(.ant-table) {
		.ant-table-thead > tr > th {
			background: #f8fafc;
			font-weight: 600;
			font-size: 16px;
		}

		.ant-table-tbody > tr > td {
			padding: 16px;
			font-size: 14px;
		}

		.ant-table-tbody > tr:nth-child(even) {
			background: #fafafa;
		}
	}
}

@media (max-width: 768px) {
	.user-vip-page {
		.hero-section .hero-content {
			flex-direction: column;
			text-align: center;
			gap: 40px;

			.hero-image {
				flex: none;
			}

			.hero-text .hero-title {
				font-size: 36px;
			}
		}

		.features-section .features-grid {
			grid-template-columns: 1fr;
		}

		.hero-buttons {
			justify-content: center;
		}
	}
}
</style>
